<template>
  <component-doc
    :title="componentConfig.title"
    :description="componentConfig.description"
    :doc="doc"
    :demos="demos"
  >
    <!-- 基础用法示例 -->
    <template #demo-0>
      <div class="example-wrapper">
        <div class="example-content-box">
          <component :is="component" text="水印示例文本">
            <div class="example-content">
              <el-row type="flex" justify="center" align="middle">
                <el-col :span="12">
                  <el-card shadow="never">
                    <h4>基础水印示例</h4>
                    <p>这是一个基础的水印示例，展示了最基本的水印效果。</p>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </component>
        </div>
      </div>
    </template>

    <!-- 自定义样式示例 -->
    <template #demo-1>
      <div class="example-wrapper">
        <div class="example-content-box">
          <component 
            :is="component" 
            text="CONFIDENTIAL"
            textColor="rgba(255, 0, 0, 0.1)"
            :fontSize="24"
            :rotate="-30"
          >
            <div class="example-content">
              <el-row type="flex" justify="center" align="middle">
                <el-col :span="12">
                  <el-card shadow="never">
                    <template #header>
                      <div class="card-header">
                        <span>机密文件</span>
                        <el-tag size="small" type="danger">Confidential</el-tag>
                      </div>
                    </template>
                    <p>这个示例展示了如何自定义水印的样式，包括颜色、大小和旋转角度。</p>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </component>
        </div>
      </div>
    </template>

    <!-- 多行文本示例 -->
    <template #demo-2>
      <div class="example-wrapper">
        <div class="example-content-box">
          <component 
            :is="component" 
            text="机密文件\n2024-01-01"
            :gap="120"
          >
            <div class="example-content">
              <el-row type="flex" justify="center" align="middle">
                <el-col :span="16">
                  <el-table :data="tableData" border style="width: 100%">
                    <el-table-column prop="date" label="日期" width="180" />
                    <el-table-column prop="name" label="文件名" width="180" />
                    <el-table-column prop="status" label="状态" />
                  </el-table>
                </el-col>
              </el-row>
            </div>
          </component>
        </div>
      </div>
    </template>
  </component-doc>
</template>

<script>
import ComponentDoc from '@/components/ComponentDoc/index.vue';
import componentsConfig from '@/config/components-config';

export default {
  name: 'WatermarkDemo',
  components: {
    ComponentDoc
  },
  data() {
    return {
      doc: '',
      component: null,
      componentConfig: {},
      tableData: [
        {
          date: '2024-01-01',
          name: '机密报告.pdf',
          status: '已加密'
        },
        {
          date: '2024-01-02',
          name: '项目方案.doc',
          status: '待审核'
        }
      ],
      demos: [
        {
          title: '基础用法',
          description: '最基本的水印用法，只需要设置 text 属性即可。',
          code: `<template>
  <!-- 使用固定尺寸的容器包裹水印组件 -->
  <div style="width: 100%; height: 200px;">
    <watermark text="水印示例文本">
      <el-card shadow="never">
        <h4>基础水印示例</h4>
        <p>这是一个基础的水印示例，展示了最基本的水印效果。</p>
      </el-card>
    </watermark>
  </div>
</template>`,
          showCode: false
        },
        {
          title: '自定义样式',
          description: '可以通过 textColor、fontSize、rotate 等属性自定义水印样式。',
          code: `<template>
  <div style="width: 100%; height: 200px;">
    <watermark 
      text="CONFIDENTIAL"
      textColor="rgba(255, 0, 0, 0.1)"
      :fontSize="24"
      :rotate="-30"
    >
      <el-card shadow="never">
        <template #header>
          <div class="card-header">
            <span>机密文件</span>
            <el-tag size="small" type="danger">Confidential</el-tag>
          </div>
        </template>
        <p>这个示例展示了如何自定义水印的样式。</p>
      </el-card>
    </watermark>
  </div>
</template>`,
          showCode: false
        },
        {
          title: '多行文本',
          description: '支持使用换行符设置多行文本水印。',
          code: `<template>
  <div style="width: 100%; height: 300px;">
    <watermark 
      text="机密文件\\n2024-01-01"
      :gap="120"
    >
      <el-table :data="tableData" border>
        <el-table-column prop="date" label="日期" width="180" />
        <el-table-column prop="name" label="文件名" width="180" />
        <el-table-column prop="status" label="状态" />
      </el-table>
    </watermark>
  </div>
</template>`,
          showCode: false
        }
      ]
    };
  },
  async created() {
    // 从配置文件中获取水印组件的配置
    this.componentConfig = componentsConfig.basic.children.watermark;
    
    // 动态加载组件
    const componentModule = await this.componentConfig.implementation();
    console.log("🚀 ~ created ~ componentModule:", componentModule)
    this.component = componentModule.default;
    
    // 动态加载文档
    if (this.componentConfig.docPath) {
      try {
        const docModule = await this.componentConfig.docPath();
        // 确保获取到的是字符串内容
        this.doc = typeof docModule.default === 'string' 
          ? docModule.default 
          : docModule.default.toString();
      } catch (error) {
        console.error('加载文档失败:', error);
        this.doc = ''; // 加载失败时设置为空字符串
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.example-wrapper {
  padding: 20px 0;
}

.example-content-box {
  width: 100%;
  height: 200px;
  background-color: #fff;
  border-radius: 4px;
  overflow: hidden;
}

.example-content {
  height: 100%;
  padding: 20px;
  box-sizing: border-box;

  .el-row {
    height: 100%;
  }
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

// 第三个示例需要更高的高度
.demo-item:nth-child(3) .example-content-box {
  height: 300px;
}
</style>